<template>
    <div class="home">
      <tab-bar @change="tabChange" :tabIndex="tabActive"/>
      <div class="home-main">
        <user-area v-show="tabActive == 1" />
        <find-music v-show="tabActive == 2"/>
        <cloudVillage v-show="tabActive == 3" />
      </div>
    </div>
</template>

<script>
  import tabBar from '@/components/tab-nav'
  import findMusic from '@/components/home/find-music/index.vue'
  import userArea from '@/components/home/user/index.vue'
  import cloudVillage from '@/components/home/cloudVillage/index.vue'
  export default {
    name: "Home",
    components:{ 
      tabBar,
      findMusic,
      userArea,
      cloudVillage
    },
    data() {
        return {
          tabActive:2
        }
    },
    methods:{
      tabChange(v) {
        this.tabActive = v; 
      },
    },
    created() {
     // let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
     // console.log(userInfo)
     // this.$store.dispatch('GET_USER_INFO',userInfo.profile.userId)
    }
  }
</script>

<style lang="less" scoped>
  .home{
    position: relative;
    height: 100%;
    
    .home-main{
      height: 100%;
    }
  }
</style>
